<template>
    <CommonCard title="今日订单" :value="`${orderToday}`">
      <!-- 1.在视图中确定容器 -->
      <div ref="chartRef" style="width: 100%; height: 100%"></div>
      <template v-slot:bottom>
        <span>昨日订单量</span>
        <span class="emphasis">{{ orderLastDay }}</span>
      </template>
    </CommonCard>
  </template>
  
  <script lang="ts">
  import { defineComponent } from "vue";
  
  export default defineComponent({
    name: "TodatOrders",
  });
  </script>
  
  <script setup lang="ts">
  import CommonCard from "./CommonCard.vue";
  //引入store
  import { useDataStore } from "@/stores/reportData";
  //引入计算属性
  import { computed, ref, onMounted, watch } from "vue";
  
  //2.引入echarts对象，使用echarts对象提供的init方法
  import { $echarts } from "@/plugins/echarts";
  
  //得到store对象
  const dataStore = useDataStore();
  
  //得到所需要的数据
  const orderToday = computed(() => dataStore.reportData.orderToday as number);
  const orderLastDay = computed(
    () => dataStore.reportData.orderLastDay as number
  );
  const orderTrend = computed(() => dataStore.reportData.orderTrend || []);
  const orderTrendAxis = computed(
    () => dataStore.reportData.orderTrendAxis || []
  );
  
  //3. 获取Chart容器DOM，为了方便在当前容器中配置echarts
  const chartRef = ref();
  
  //4. 进行echarts图标配置
  const getOption = () => {
    return {
      //x轴的配置
      xAxis: {
        boundaryGap: false, // 两侧不留空白
        data: orderTrendAxis.value, // x轴数据列表
      },
      //y轴的配置
      yAxis: {
        show: false, // 不显示y轴及标线
      },
      //图标内容的详细配置,是一个数组,因为图标可能是多个图(比如多条折线)
      series: [
        {
          //图标名称
          name: "实时订单数",
          //图标的类型:line代表折线图
          type: "line",
          // 列表数据(和x轴数据进行对应)
          data: orderTrend.value,
          // 线条光滑(失去了折线的棱角)
          smooth: true,
          // 区域的样式(折线内部的区域样式)，不配置就没有
          areaStyle: {
            color: "purple",
            opacity: ".5",
          },
          // 折线点的样式
          itemStyle: {
            // opacity: 0,
          },
          // 线的样式
          lineStyle: {
            opacity: 1,
            color: "red",
          },
        },
      ],
      // 图表在坐标中显示的位置
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
      },
      // 显示提示
      tooltip: {
        /* 触发条件,折线图使用axis 饼状图用item */
        trigger: "axis",
        // 是否将 tooltip 框限制在图表的区域内
        confine: true,
      },
    };
  };
  
  let chart: any;
  onMounted(() => {
    //5.在mounted中把Chart容器进行初始化
    chart = $echarts.init(chartRef.value);
    //6.把配置交给已经初始化echarts容器
    chart.setOption(getOption());
  });
  
  //7.因为数据是异步获取的，所以我们要监视echarts数据的变化，然后再次给echarts传入配置
  watch(orderToday, () => {
    chart.setOption(getOption());
  });
  </script>
  
  <style scoped lang="scss"></style>
  